<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    
    <title>充值缴费</title>
    <link href="${ctx}/style/style.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/style/phoneRecharge.css" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet"
			href="${ctx}/style/formValidataor/formValidator.css" />
	<script language="JavaScript" src="${ctx}/scripts/jquery.js"></script>
	<script type="text/javascript"
			src="${ctx}/scripts/formValidataor/formValidator.js"></script>
	<script type="text/javascript"
		src="${ctx}/scripts/formValidataor/formValidatorRegex.js"></script>
	<script type="text/javascript"
			src="${ctx}/scripts/lhgdialog/lhgdialog.js"></script>		
	<script type="text/javascript">
		$(document).ready(function(){
			$.formValidator.initConfig();
			$("#phoneNumber").formValidator({onshow:"请输入充值号码",
		        onfocus:"请输入充值号码",oncorrect:"充值号码输入正确"})
		        .regexValidator({regexp:"telphone",datatype:"enum",onerror:"充值号码格式不正确"})
		         .functionValidator({fun:function(val,elem){
					if(val != ''){
						return true;
					}else{
						return false;
					}
				},onerror:"充值号码不能为空"});   
		    $("#paymentmoney").formValidator({onshow:"请输入充值金额",
		        onfocus:"请输入充值金额",oncorrect:"充值金额输入正确"})
		        .regexValidator({regexp:"intege1",datatype:"enum",onerror:"充值金额格式不正确"})
		        .functionValidator({fun:function(val,elem){
					if(val != ''){
						return true;
					}else{
						return false;
					}
				},onerror:"充值金额不能为空"});   
		        
		        
		   $("table[class=imgtable]").each(function () {  
		         var _this = $(this);  
		         _this.find("tr:not(:first)").hover(function () {  
		             $(this).attr("bColor", $(this).css("background-color")).css("background-color", "#e5ebee").css("cursor", "pointer");  
		         }, function () {  
		             $(this).css("background-color", $(this).attr("bColor"));  
		         });  
		     });  
		});
		var agentprice = 0;
		var agentBalance = 0;
		function  btn_fun(val){
			if(val == '查询' && val != ''){
				var phoneNumber = $("#phoneNumber").val();
				var reg = new RegExp("(^(13|14|15|18)[0-9]{9}$)|(^(([0\\+]\\d{2,3})?(0\\d{2,3}))?(\\d{7,8})?$)");
				if(phoneNumber != '' && reg.test(phoneNumber)){
					$.ajax({
						url: "Mobile_queryMobile.action?mobilenumber="+phoneNumber,
						type : 'post',
						dataType : 'json',
						beforeSend:loading,
						dataFilter :function (data, textStatus) {
							$("#loading").hide();
				         	var result = eval("("+data+")");
				         	if(result.success == 'true'){
				         		var datas = eval("("+result.data+")");
				         		setMobleQuery(datas);
				         	}else{
				         		$.dialog.alert(result.data);
				         	}
				        } 
					});
				}
			}else if(val == '充值'){
				var paymentmoney = $("#paymentmoney").val();
				if(paymentmoney != '' && parseInt(paymentmoney) >0 && paymentmoney.indexOf('.')<0){
					if($("#operatorsnumber").val() == '2' && parseInt(paymentmoney) < 10){
						$.dialog.alert("对不起！移动充值金额必须为10到300之间的整数！");
						return ;
					}
					setProgress(3)
					if((parseFloat(agentBalance) - parseFloat(paymentmoney)) > 0){
						var phoneNumber = $("#phoneNumber").val();
						$("#tip_text").html("确定为【"+phoneNumber+"】充值【"+paymentmoney+"】元吗？");
						
						$("#tip_text1").html(phoneNumber);
						$("#tip_text2").html(paymentmoney+".00(元)");
						if($("#userAreaCode").val() == $("#area").val()){
							agentprice = paymentmoney;
							$("#tip_text3").html(agentprice+".00(元)");
						}else{
							agentprice = parseInt(paymentmoney)+1;
							$("#tip_text3").html(agentprice+".00(元)&nbsp;&nbsp;&nbsp;&nbsp; <font color=red>[包含1元异地手续费]</font>");
						}
						$.dialog({ 
							lock: true, 
							icon: 'confirm.gif',
							width: '380px',
		   					height: '100px',
		   					max: false,
		    				min: false,
		   					title:  "充值信息确认",
						    content: $("#tip").html(),
						    ok : recharge,
						    cancel: true
						});
					}else{
						$.dialog.alert("对不起！你的余额不足，无法进行充值！");
					}	
				}	
			}		
		}
		var verificationCode = '';
		function setMobleQuery(data){
			if(data == ''){
				setProgress(1)
				$("#resetBtn").hide();
				$("#phoneNumber").removeAttr("readonly");
				$("#phoneNumber").val("");
				$("#mobiletype_li").hide();
				$("#mobiletype").html("");
				$("#mobilearea_li").hide();
				$("#mobilearea").html("");
				$("#userName_li").hide();
				$("#userName").html("");
				$("#balance_li").hide();
				$("#balance").html("");
				$("#money_li").hide();
				$("#otherMoney_li").hide();
				$("#paymentmoney").val("");
				$("#btn").val("查询");
				$("#money").val("");
				$("#money_"+selectMoney).attr('className',"moneySpan2");
			}else{
				setProgress(2)
				$("#resetBtn").show();
				$("#phoneNumber").attr("readonly","readonly");
				$("#mobiletype_li").show();
				$("#mobiletype").html(data.mobiletypeDesp);
				$("#operatorsnumber").val(data.mobiletype);
				$("#mobilearea_li").show();
				$("#mobilearea").html(data.mobilearea);
				$("#area").val(data.areacode);
				$("#userName_li").show();
				$("#userName").html(data.userName);
				$("#balance_li").show();
				$("#balance").html(data.balance);
				$("#money_li").show();
				$("#otherMoney_li").show();
				$("#btn").val("充值");
				verificationCode = data.verificationCode;
				agentBalance = data.agentBalance;
			}
		}
		var selectMoney = 0;
		function setMoneySpan(type,id){
			if(type == '0'){
				$("#money_"+id).attr('className',"moneySpan1");
			}else if(type == '1' && selectMoney != id){
				$("#money_"+id).attr('className',"moneySpan2");
			}
		}
		function setMoney(id,money){
			$("#money_"+selectMoney).attr('className',"moneySpan2");
			$("#money_"+id).css("moneySpan1");
			selectMoney = id;
			$("#paymentmoney").val(money);
			$.formValidator.oneValid("paymentmoney");    
		}
		function setPaymentmoney(money){
			$("#money_"+selectMoney).attr('className',"moneySpan2");
		}
		function setProgress(num){
			for(i=1;i<8;i++){
				if(i<5){
					$("#td"+i).attr('className',"progress_gray");
				}else{
					$("#td"+i).attr('className',"progress_gray_split");
				}
			}
		
			for(i=1;i<5;i++){
				if(i == num){
					$("#td"+i).attr('className',"progress_blue");
				}else{
					$("#td"+i).attr('className',"progress_gray");
				}
			}
			
			if(num == 1){
				$("#td5").attr('className',"progress_blue_split");
			}else if(num == 2 || num ==3){
				$("#td"+(parseInt(num)+3)).attr('className',"progress_gray_split2");
				$("#td"+(parseInt(num)+4)).attr('className',"progress_blue_split");
			}else if(num == 4){
				$("#td7").attr('className',"progress_gray_split2");
			}
		}
		
		function recharge(){
			var param = "{'mobilephone':'"+$("#phoneNumber").val();
				param += "','operatorsnumber':'"+$("#operatorsnumber").val();
				param += "','paymentmoney':'"+$("#paymentmoney").val();
				param += "','beforebalance':'"+$("#balance").html();
				param += "','area':'"+$("#area").val();
				param += "','agentprice':'"+agentprice;
				param += "','verificationCode':'"+verificationCode
				param += "'}";
			$.ajax({
				url: "Callpaymentrecord_add.action?code="+param,
				type : 'post',
				dataType : 'json',
				beforeSend:loading,
				dataFilter :function (data, textStatus) {
					$("#loading").hide();
					setProgress(4)
		         	var result = eval("("+data+")");
		         	$.dialog.alert(result.data,function(){
			         	if(result.success == 'true'){
			         		$("#agentMoney").html((parseFloat($("#agentMoney").html()) - parseFloat(agentprice)).toFixed(2));
			         	}
	         			newData();
				    	setMobleQuery('');
				        setProgress(1);
		         	});
		        } 
			});
		}
		
		function newData(){
			$.ajax({
				url: "Callpaymentrecord_newData.action",
				type : 'post',
				dataType : 'json',
				dataFilter :function (data, textStatus) {
		         	var result = eval("("+data+")");
		         	if(result.success == 'true'){
         				var datas = eval("("+result.data+")");
         				var tr = '';
         				var status = '';
				        $.each(datas, function(i, item) {
				        	$('#newData'+i).remove();
				        	if(i%2 == 0){
				        	 	tr = '<tr height=25  id=newData'+i+'>';
				        	}else{
				        		tr = '<tr height=25 style="background:#f5f8fa;" id=newData'+i+'>';
				        	}
				        	status = item.status;
				        	if(status == '0'){
				        		status = '<font color=#458B00>缴费中</font>';
				        	}else if(status == '1'){
				        		status = '<font color=blue>成功</font>';
				        	}else if(status == '2'){
				        		status = '<font color=RED>已退款</font>';
				        	}
			        		tr += '<td>'+ item.serialnumber + '</td>';
			        		tr += '<td>'+ item.occurtime + '</td>';
			        		tr += '<td>'+ item.mobilephone + '</td>';
			        		tr += '<td>'+ item.operators + '</td>';
			        		tr += '<td>'+ item.paymentmoney + '</td>';
			        		tr += '<td>'+ status + '</td>';
			        		tr += '</tr>';	
				        	$("#newData").append(tr);
				        });
				     }   
		        } 
			});
			setTimeout("newData()",60000)
		}
		function loading(){
			$("#loading").show();
		}
		window.onload = function(){
			setMobleQuery('');
			setProgress(1)
			newData();
		}
	</script>
	<script type="text/javascript"> 
</script>
  </head>
  
  <body>
   		<div class="place"  >
		    <span>位置：</span>
		    <ul class="placeul">
		    	<li><a href="#">话费充值</a></li>
		    </ul>
	    </div>
	    <table cellpadding="0"  cellspacing="0" border="0" style="margin-top: -20px;">
			<tr>
				<td style="padding-top: 10px;" valign="top">
					<table cellpadding="0"  cellspacing="0" border="0" style="margin-top: 20px;margin-left: 30px;margin-bottom: 10px;" class="progress">
		    			<tr height="30">
		    				<td  id="td1">1.号码查询</td>
		    				<td  id="td5"></td>
		    				<td  id="td2">2.金额输入</td>
		    				<td  id="td6"></td>
		    				<td  id="td3">3.充值确认</td>
		    				<td  id="td7"></td>
		    				<td  id="td4">4.充值完成</td>
		    				<td width="184">&nbsp;</td>
		    				<td class="tdbg"  style="width: 140px;padding-left: 60px;color:#ffffff;" align="left">
		    					当前余额：<label id = "agentMoney"><s:property value="code"/></label>
		    				</td>
		    			</tr>
		    		</table>
				    <ul class="forminfo" style="border:solid 1px #b6cad2;margin-left: 30px;margin-top: -10px;width: 850px;">
					    <li style="display: block;">
					    	<label>充值号码：<b>*</b></label> 
					    	<table cellpadding="0" cellspacing="0" border="0" style="margin-top: -10px;">
				    			<tr>
				    				<td><input  type="text" class="dfinput" id="phoneNumber" style="width:200px;"/></td>
				    				<td><div id="phoneNumberTip"></div>&nbsp;</td>
				    			</tr>
				    		</table>	
					    </li>
					    <li id="mobiletype_li">
					    	<label >号码运营商：</label><label id="mobiletype"></label>
					    	<input type="hidden" id="operatorsnumber">
					    </li>
					    <li id="mobilearea_li">
					    	<label>号码归属地：</label><label id="mobilearea"></label>
					    	<input type="hidden" id="area">
					    </li>
					    <li id="userName_li">
					    	<label>机&nbsp;主&nbsp;姓&nbsp;名：</label><label id="userName" style="width: 200px;"></label>
					    </li>
				    	<li id="balance_li">
				    		<label>余&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额：</label><label id="balance"></label>
				    		<input type="hidden" id="beforebalance">
				    	</li>
				    	<li id="money_li"><label>充值金额：<b>*</b></label>
				    		<table cellpadding="0" cellspacing="0" border="0" style="margin-top: -8px;">
				    			<tr>
				    				<td><a href="javascript:setMoney('1','10')" onmouseover="setMoneySpan('0','1')" onMouseOut="setMoneySpan('1','1')" ><span class="money" id="money_1">10元</span></a></td>
				    				<td><a href="javascript:setMoney('2','15')" onmouseover="setMoneySpan('0','2')" onMouseOut="setMoneySpan('1','2')"><span class="money" id="money_2">15元</span></a></td>
				    				<td><a href="javascript:setMoney('3','20')" onmouseover="setMoneySpan('0','3')" onMouseOut="setMoneySpan('1','3')"><span class="money" id="money_3">20元</span></a></td>
				    				<td><a href="javascript:setMoney('4','30')" onmouseover="setMoneySpan('0','4')" onMouseOut="setMoneySpan('1','4')"><span class="money" id="money_4">30元</span></a></td>
				    				<td><a href="javascript:setMoney('5','50')" onmouseover="setMoneySpan('0','5')" onMouseOut="setMoneySpan('1','5')"><span class="money" id="money_5">50元</span></a></td>
				    				<td><a href="javascript:setMoney('6','100')" onmouseover="setMoneySpan('0','6')" onMouseOut="setMoneySpan('1','6')"><span class="money" id="money_6">100元</span></a></td>
				    			</tr>
				    		</table>
						</li>
						<li id="otherMoney_li">
							<label>其他金额：<b>*</b></label>
							<table cellpadding="0" cellspacing="0" border="0" style="margin-top: -8px;">
								<tr>
									<td><input name="money" type="text" class="dfinput" id="paymentmoney" style="width:200px;" onblur="setPaymentmoney(this.value)"/></td>
									<td><div id="paymentmoneyTip"></div></td>
								</tr>
							</table>
						</li>
						<li style="display: block;">
							<label>&nbsp;</label>
							<table cellpadding="0" cellspacing="0" border="0" style="margin-top: -8px;">
								<tr>
									<td><input id="btn" type="button" class="scbtn" value="查询" onclick="btn_fun(this.value)"/></td>
									<td><input  type="button" class="scbtn" style="display: none;margin-left: 10px;" id="resetBtn" value="返回" onclick="setMobleQuery('')"/></td>
								</tr>
							</table>
						</li>
					</ul>
				</td>
			</tr>
		</table>
		<table class="imgtable" id="newData" style="width: 850px;margin-left:30px;margin-top: 5px;">
		   <thead>
		   		<tr>
				    <th align="center">流水号</th>
				    <th align="center">缴费时间</th>
				    <th align="center">缴费号码</th>
				    <th align="center">号码运营商</th>
				    <th align="center">充值金额</th>
				    <th align="center">充值状态</th>
			    </tr>
		    </thead>
		</table>		    
		<div id="tip"  style="display: none;text-align: center;">
			<table class="dataTable" cellpadding="0" cellspacing="0" border="0" >
    			<tr height="28">
    				<td style="width: 100px;padding-left: 10px"  align="left">
    					充值号码：
    				</td>
    				<td width="200" id="tip_text1">
    				
    				</td>
    			</tr>
    			<tr height="28">
    				<td style="width: 100px;padding-left: 10px"  align="left">
    					充值金额：
    				</td>
    				<td width="200" id="tip_text2">
    				
    				</td>
    			</tr>
    			<tr height="28">
    				<td style="width: 100px;padding-left: 10px"  align="left">
    					应收金额：
    				</td>
    				<td width="200" id="tip_text3">
    					
    				</td>
    			</tr>
	    	</table>	
		</div>
		
		<script type="text/javascript">
			$('.imgtable tbody tr:odd').addClass('odd');
		</script>
		
		<div id="loading" style="position:absolute; display:none; left:-1px; top:1px; width:100%; height:100%; background-color:#FFFFFF; 
			filter:alpha(opacity=50);-moz-opacity:0.5; -khtml-opacity: 0.5;opacity: 0.5; z-index:1000;"> 
			<div  style="position:absolute;left:180px;top:150px;width:100px;height:100px;background-color:#FFFFFF; z-index:9001;" >
				<img alt="" id="wait1" src="${ctx}/images/loading.gif" >
			</div>
		</div>
		
		<s:hidden id="userAreaCode" name="sysUser.boundcode_number" />
		
  </body>
</html>
